﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" href="/Images/ico/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link type="text/css" rel="stylesheet" href="/layui/css/layui.css"  media="all">
<link type="text/css" rel="stylesheet" href="/css/rangeslider.css"  media="all">
<script type="text/javascript" src="/layui/layui.js" charset="utf-8"></script>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/swiper.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/layui-post.js"></script>
<script type="text/javascript" src="/js/rangeslider.min.js"></script>
<script type="text/javascript" src="/js/clipboard.min.js"></script>
<style>
.rangeslider {width: 90%;margin: 0 auto;}
.orderlist .lists > li {padding-bottom: 10px;}
.orderlist .lists > li .p-adrr::after {content: '';width: 20px;height: 20px;display: inline-block;margin:0 0 0 10px;background-image: url('/img/copy_1.png');background-size: cover;}
</style>
</head>
<body style="background: #f3f0f0;">
    <div class="ng-scope">
        <div class="loca ng-scope title-order" style="background: #f9fafd;">
            <a class="title-top" href="javascript:window.history.back();"></a>
            <a class="title-center">订单配送</a>
            <a class="title-right" href="/index"></a>
        </div>
        <ul class="navlist" style="height: 35px;margin-top: 50px;position: fixed;width: 100%;top: 0px;z-index: 10;background: #FFFFFF;border-bottom: 1px dotted #ccc;">
            <li type="lists" style="width: 33.33%;" data-field="orderStatus" data-value="ORDER_STATUS_21<->ORDER_STATUS_05" class="active">待确认</li>
            <li type="tof" style="width: 33.33%;" data-field="orderStatus" data-value="ORDER_STATUS_05">配送中</li>
            <li type="tof" style="width: 33.33%;" data-field="orderStatus" data-value="ORDER_STATUS_06">已送达</li>
        </ul>
        <div class="orderlist" id="order_lists" style="margin-top: 85px;">
            <div style="height: 8px;"></div>
            <!--暂无配送提示-->
            <div class="cartempty ng-scope ng-hide">
                <h3>暂无配送订单</h3>
            </div>
            <!--配送商品信息-->
            <ul class="lists ng-scope" style="margin: 0 auto;width: 96%;" id="orders"></ul>
        </div>
    </div>
</body>
<script>
$.ajaxSetup({contentType: "application/json; charset=utf-8"});
var userInfo = $.parseJSON(sessionStorage.getItem("userInfo")),enumsData=[];
layui.use(['layer','form','element','util'], function(){
    layui.util.fixbar({
        top:true, css: { right: 15, bottom: 105 },
        showHeight:100, click: function (type) { if (type === 'top') $('.layui-fluid').animate({ scrollTop: 0 }, 200); }
    });
    $.post(geturl()+'/enums/select?token='+sessionStorage.getItem("token"), JSON.stringify({parentEnumCode:"ORDER_STATUS",orderByAscType:"enumCode"}), function (res) {
        enumsData = res.data
    }).done(function(){
        showData('orderStatus','ORDER_STATUS_21<->ORDER_STATUS_05');
    })
})
function showData(field,type){
    // 查询用户用户已支付，确认状态为1，配送类型为1的数据
    var data = {status:1,isSure:1,orderByAscType:"createTime",sendType:1};
    if(!isEmpty(field) && !isEmpty(type)) {
        if(type == "ORDER_STATUS_06"){
            data["gtEqByType"] = field+","+type
        }else{
            data[field] = type;
        }
    }
    $.post("/cateringOrder/select",JSON.stringify(data), function (res) {
        $("#orders").html("")
        if(res.data.length == 0) $(".cartempty").removeClass("ng-hide")
        else $(".cartempty").addClass("ng-hide")
        for(var i in res.data){
            $("#orders").append(
                '<li id="'+res.data[i].sysId+'" style="border-bottom: 0;background: #fff;border-radius: 10px;">' +
                '<div><p class="p-adrr" style="color: #0C0C0C; font-weight: bold;font-size: 18px;" data-value="'+res.data[i].address+res.data[i].detail+'">'+res.data[i].address.replaceAll("-","")+res.data[i].detail+'<span class="status" style="line-height: 40px;font-weight:bold;font-size: 14px;">'+getOrderStatus(res.data[i].status,res.data[i].orderStatus)+'</span></p>' +
                '<p style="margin: 5px 0;">'+res.data[i].createTime+'</p></div>' +
                '<ul id="'+res.data[i].orderNo+'" class="pdtlist" style="overflow-y: hidden;overflow-x: auto;width:auto;white-space: nowrap;width:auto;height:120px;position:inherit;">' +
                '<li style="display: inline-block;width: 96%;margin-right:10px;background: #eee8e8; border-radius: 20px;">' +
                '<div onclick="window.location.href=\'/orderdetail?orderId='+res.data[i].sysId+'\'" class="l" style="width: 100%;height: 40px;line-height: 40px;padding: 10px">' + res.data[i].orderNo +'</div>' +
                '<div class="r" style="width: 100%;padding:0;height: 40px;">' +
                '<p class="t" style="padding-right: 10px; font-size: 18px;">'+res.data[i].person+' '+res.data[i].telPhone+'</p>' +
                '</div>' +
                '</li>' +
                '</ul>' +
                '<div class="bottom" style="height: 50px;">' +
                (res.data[i].orderStatus === 'ORDER_STATUS_21' ?'<a onclick="doSureOrder(\''+res.data[i].sysId+'\',1)" style="border-radius: 20px;padding: 10px 12px;">确认配送</a>' : '') +
                (res.data[i].orderStatus === 'ORDER_STATUS_05' ? '<input type="range" min="0" max="100" value="0" data-id="'+res.data[i].sysId+'" data-rangeslider>' : '') +
                '</div>' +
                '</li><div style="height:10px;"></div>'
            )
            if(type != "ORDER_STATUS_06"){
                $("#"+res.data[i].sysId).append(
                    '<div style="margin-top:-195px;width: 80px;height: 110px;background: #eee8e8;right: 4%;border-radius: 20px;position: absolute;">' +
                    '<div style="margin-top: 50%;text-align: center;">' +
                    '<p style="color: #0C0C0C;font-weight:bold;"><a href="tel:'+res.data[i].telPhone+'"><img style="width: 40px;height: 40px;" src="/img/tel.png"></p>' +
                    '</div>' +
                    '</div>'
                )
            }
        }
    }).done(function(){
        var $document   = $(document);
        var selector    = '[data-rangeslider]';
        var $inputRange = $(selector);
        function valueOutput(element) {
            var value = element.value;
            if(value == 100) {
                doSureOrder(element.getAttribute("data-id"),2)
                return
            }
        }
        $document.on('input', selector, function(e) {
            valueOutput(e.target);
        });
        $inputRange.rangeslider({
            polyfill: false
        });

        $(".p-adrr").click(function (event){
            event.preventDefault();
            event.stopPropagation()
            copyToClipboard($(this).attr("data-value"))
            // navigator.clipboard.writeText($(this).attr("data-value")).then(function() {
            //     layer.msg('地址复制成功',{icon:1,time:1000});
            // }).catch(function(err) {
            //     console.error('复制文本失败', err);
            // });
        })
    })
}
function copyToClipboard(textToCopy) {
    // navigator clipboard 需要https等安全上下文
    if (navigator.clipboard && window.isSecureContext) {
        // navigator clipboard 向剪贴板写文本
        navigator.clipboard.writeText(textToCopy).then(function() {
            layer.msg('地址复制成功',{icon:1,time:1000});
        }).catch(function(err) {console.error('复制文本失败', err);});
    } else {
        // document.execCommand('copy') 向剪贴板写文本
        let input = document.createElement('input')
        input.style.position = 'fixed'
        input.style.top = '-10000px'
        input.style.zIndex = '-999'
        document.body.appendChild(input)
        input.value = textToCopy
        input.focus()
        input.select()
        try {
            let result = document.execCommand('copy')
            document.body.removeChild(input)
            if (!result || result === 'unsuccessful') {
                console.log('复制失败')
            } else {
                layer.msg('地址复制成功',{icon:1,time:1000});
            }
        } catch (e) {
            document.body.removeChild(input)
            alert('当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作')
        }
    }
}
//1待配送2待收货3待评价4已完成
function getOrderStatus(pays,orders){
    return enums(orders,'ORDER_STATUS')
}
function enums(s,enumCode){
    for(var key in enumsData[enumCode]) if(key === s) return enumsData[enumCode][s];
}
function doSureOrder(id,orders){
    if(orders == 1){
        layer.confirm('确认配送吗？',function(index){
            $.post("/cateringOrder/updateStatus",JSON.stringify({sysId:id,orderStatus:'ORDER_STATUS_05'}), function (res) {
                layer.closeAll();
                $(".navlist li").each(function () {
                    if($(this).attr("class") === "active") showData($(this).attr("data-field"),$(this).attr("data-value"))
                })
            })
        },function(index){layer.closeAll();showData('orderStatus','ORDER_STATUS_21<->ORDER_STATUS_05');})
    } else if(orders == 2){
        layer.confirm('确认已送达吗？',function(index){
            $.post("/cateringOrder/updateStatus",JSON.stringify({sysId:id,orderStatus:'ORDER_STATUS_06,ORDER_STATUS_23'}), function (res) {
                layer.msg("已确认",{icon:1,time:1000},function (){
                    layer.closeAll();
                    $(".navlist li").each(function () {
                        if($(this).attr("class") === "active") showData($(this).attr("data-field"),$(this).attr("data-value"))
                    })
                })
            })
        },function(index){layer.closeAll();showData('orderStatus','ORDER_STATUS_21<->ORDER_STATUS_05');})
    }
}
$(".navlist li").each(function () {
    $(this).click(function () {
        $(".navlist li").removeClass("active");
        $(this).addClass("active");
        showData($(this).attr("data-field"),$(this).attr("data-value"))
    });
});

function copyAddress(address){
    event.preventDefault();
    event.stopPropagation()

}
</script>
</html>

